
<template>
  <div class="Emp_approval">
    <section class='section'>
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="待办" name="a">
        <ul class="wait_list" v-if='tab_com.length'>
          <li class="wait_items" v-for='(k,i) in tab_com' @click.stop='gotab1(k)'>
            <div class="wait_title">
              <span class="wait_sub" :class='{xiaojia:k.type=="销"}'>假</span>
              <span>{{k.name}}的{{k.type}}假申请</span>
              <span class="wait_time">{{k.leave_name}}（共{{k.leave_day}}天）</span>
            </div>
            <div class="wait_info">
              <p>
                <i class="fa fa-clock-o" aria-hidden="true"></i>
                <span>{{k.start_time || '-'}}</span><span class="time_connect">至</span><span>{{k.end_time || '-'}}</span>
              </p>
              <p>
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <span>{{k.dept_name}}</span>
              </p>
              <p>
                <i class="fa fa-arrow-circle-o-right"></i> 
                <span :class="handleColor(k.activityFlag)">{{k.activityFlag}}</span>
              </p>
            </div>
          </li>
       
        </ul>

          <section class='section s2' v-else>
            <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div>
            <p class="data">您暂时还没有相关审批</p>
          </section>
        </el-tab-pane>
      <el-tab-pane label="待阅" name="b">
        <ul class="wait_list" v-if='tab2 && tab2.length'>
          <li class="wait_items" v-for='(k,i) in tab2' @click.stop='gotab2(k)'>
            <div class="wait_title">
              <span class="wait_sub" :class='{xiaojia:k.type=="销"}'>假</span>
              <span>{{k.name}}的{{k.type}}假申请</span>
              <span class="wait_time"></span>
            </div>
            <div class="wait_info">
              <p>
                <i class="fa fa-clock-o" aria-hidden="true"></i>
                <span>{{k.start_time}}</span><span class="time_connect">至</span><span>{{k.end_time}}</span>
              </p>
              <p>
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <span>{{k.dept_name}}</span>
              </p>
              <p>
                <i class="fa fa-arrow-circle-o-right"></i> 
                <span :class="handleColor(k.audit_status_name)">{{k.audit_status_name}}</span>
              </p>
            </div>
          </li>
        
        </ul>
        <section class='section s2' v-else>
            
            <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div>
            <p class="data">暂无数据</p>
        </section>
      </el-tab-pane>
      <el-tab-pane label="我发起" name="c">
        <ul class="commit_list" v-if='tab3 && tab3.length'>
          <li class="commit_items" v-for='(k,i) in tab3' @click.stop='gotab3(k)'> 
            <div>
              <span class="commit_sub"></span>
              <b>{{k.leave_name}}</b>
              <span>共{{k.leave_day}}天</span>
              <span class="commit_time"><span>{{k.start_time}}</span><span class="time_connect">至</span><span>{{k.end_time}}</span></span>
            </div>
            <p class="commit_reason">{{k.leave_reason}}</p>
          </li>
    
        </ul>

         <section class='section s2' v-else>
            <div class="imgBox"><img src="../../../static/images/nodata.svg" alt=""></div>
            <p class="data">暂无数据</p>
        </section>
      </el-tab-pane>
    </el-tabs>
  	  <b class="tipA" v-if="tabNumA !== 0">{{tabNumA}}</b>
    	<b class="tipB" v-if="tabNumR !== 0">{{tabNumR}}</b>
      <div class="query_all" ><a @click.stop='gotoList' >查看全部</a></div>
    </section>
  </div>
</template>

<script>
// import Axios from 'axios'
import Vue from 'vue'
import { Tabs, TabPane, Badge } from 'element-ui'
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Badge)

export default {
  name: 'Emp_approval',
  data () {
    return {
      activeName2: 'a',
      emplid: null,
      tab2: [],
      tab3: '',
      numA: 1,
      numB: 1,
    }
  },

  props: ['tab', 'tabNumA', 'tabNumR'],

  computed: {
    tab_com () {
      if (this.tab.length) {
        let result = []
        this.tab.forEach(ele => {

          if (ele.busi_id.startsWith('XJ')) {
            ele.type = '销'
          } else if (ele.busi_id.startsWith('QJ')) {
            ele.type = '请'
          }

          result.push(ele)

        })

        return result

      } else {
        return []
      }
    }
  },

  watch: {
    activeName2: function (newVal, oldVal) {

      switch (newVal) {
        case 'a':
          this.getWaitAppro();
          break;
        case 'b':
          this.getDoneAprro();
          break;
        case 'c':
          this.getStart();
          break;
      }
    }
  },

  methods: {

    getWaitAppro: function () {
      let params = {
        pageNum: 1,
        pageSize: 2
      }
      this.Axios
        .Post(this.URL.AuditBylist.url, params)
        .then((res) => {
          var result = res.data.datas;
          this.$emit('update:tab', result);

        })
    },

    getDoneAprro: function () {
      let params = {
        pageNum: 1,
        pageSize: 2,
        status: 1,
      }
      this.Axios
        .Post(this.URL.findCopyToMeFlow.url, params)
        .then((res) => {

           res.data.datas.forEach(ele => {
            if (ele.id.startsWith('XJ')) {
              ele.type = '销'
            } else if (ele.id.startsWith('QJ')) {
              ele.type = '请'
            }
            this.tab2.push(ele)
          })
        })

    },

    getStart: function () {
      let params = {
        pageSize: 2,
        pageNum: 1
      }
      this.Axios
        .Post(this.URL.myleaveByrecord.url, params)
        .then((res) => {
          this.tab3 = res.data.datas
        })
    },

    handleColor (str) {
      switch (str) {
        case '已审批':
          return 'checking'
          break;
        case '已同意':
          return 'checking'
          break;
        case '已拒绝':
          return 'nook'
        default:
          return 'pass'
          break;
      }
    },

    handleClick (tab, event) {

      if (this.activeName2 == 'first') {
        event.target.style.borderLeft = 0
      }
    },
    gotoList () {

      this.$router.push({ path: '/requestVacation', query: { activeName: this.activeName2 } })

    },
    gotab1 (k) {
      let params = {
        applyId: k.busi_id || k.applyid,
        exectionId: k.exectionId
      }

      localStorage.setItem('tab1Params', JSON.stringify(params))

      this.$router.push({ name: 't1detail' })
    },
    gotab2 (k) {
      let params = {
        applyId: k.id,
        exectionId: k.exectionId,
        cId: k.cId
      }

      localStorage.setItem('tab4Params', JSON.stringify(params))

      this.$router.push({ name: 't4detail' })


    },
    gotab3 (k) {
      let params = {
        applyId: k.busi_id || k.applyid,
        exectionId: k.exectionId
      }

      localStorage.setItem('tab3Params', JSON.stringify(params))

      this.$router.push({ name: 't3detail' })
    },

    initDone: function () {
      let params = {
        pageNum: 1,
        pageSize: 2
      }
      this.Axios
        .Post(this.URL.examinationByrecord.url, params)
        .then((res) => {
          this.tab2 = res.data.datas
        })
    },
    initStart: function () {
      let params = {
        pageSize: 2,
        pageNum: 1
      }
      this.Axios
        .Post(this.URL.myleaveByrecord.url, params)
        .then((res) => {
          this.tab3 = res.data.datas
        })
    },

  },

  mounted () {
    this.emplid = window.location.href && window.location.href.split('=')[1]

    //		this.getWaitAppro();


    //  {
    //    let params = {
    //      pageNum: 1,
    //      pageSize: 2
    //    }
    //    this.Axios
    //      .Post(this.URL.examinationByrecord.url, params)
    //      .then((res) => {
    //        this.tab2 = res.data.datas
    //      })
    //
    //  }
    //
    //
    //  {
    //    let params = {
    //      pageSize: 2,
    //      pageNum: 1
    //    }
    //    this.Axios
    //      .Post(this.URL.myleaveByrecord.url, params)
    //      .then((res) => {
    //        this.tab3 = res.data.datas
    //      })
    //  }


  }
}
</script>

<style lang='less'>
.pass {
  color: #339966;
}
.section {
  position: relative;
}

.tipA {
  position: absolute;
  top: 8px;
  left: 55px;
  background-color: #e24040;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  width: 22px;
  height: 16px;
  line-height: 16px;
  z-index: 1100;
  text-align: center;
  border-radius: 50%;
}
.tipB {
  position: absolute;
  top: 8px;
  left: 143px;
  background-color: #e24040;
  color: #fff;
  padding-left: 0.02rem;
  font-size: 12px;
  font-weight: normal;
  width: 22px;
  height: 16px;
  line-height: 16px;
  z-index: 1100;
  text-align: center;
  border-radius: 50%;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.s2 {
  div.imgBox {
    background-color: rgba(0, 0, 0, 0.01);
    text-align: center;
    border-radius: 50%;
    padding: 30px;
    width: 160px;
    height: 160px;
    line-height: 160px;
    margin: 0 auto;
    margin-top: 20px;
    img {
      display: inline-block;
      height: 100px;
      width: 100px;
    }
  }
  p.data {
    margin-top: 25px;
    text-align: center;
  }
}
.title {
  padding: 12px 10px;
  div,
  h2 {
    display: inline-block;
    padding: 0 10px;
  }
  h2 {
    font-size: 16px;
    font-style: normal;
  }
  div {
    padding-top: 2px;
    float: right;
  }
}

.Emp_approval .wait_list .wait_info p {
  padding: 4px 0;
}

.Emp_approval {
  position: relative;
}
.Emp_approval .query_all {
  position: absolute;
  right: 20px;
  top: 15px;
  color: #38f;
  cursor: pointer;
  font-size: 12px;
}
.Emp_approval .el-tabs__item {
  height: auto;
  padding: 0 28px;
  color: #000;
  border-radius: 0;

  font-weight: 900;
}
.Emp_approval .el-tabs__header {
  margin: 0;
}
.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-radius: 0;
  border-top-color: #38f;
  border-top-width: 2px;
}
.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-top-width: 2px;
}

.Emp_approval .el-tabs--card > .el-tabs__header .el-tabs__nav-scroll {
  margin-left: -1px;
}
.Emp_approval .item {
  margin-top: 10px;
  margin-right: 40px;
}

.Emp_approval {
  overflow: auto;
}
.Emp_approval .wait_list .wait_items {
  padding: 8px 20px 0 20px;
  border-bottom: 1px solid #ecf0f5;
  cursor: pointer;
}
.Emp_approval .wait_list .wait_items:nth-last-child(1) {
  border: 0;
}
.Emp_approval .wait_list .wait_items .wait_title {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.Emp_approval .wait_list .wait_title .wait_sub {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: #38f;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  border-radius: 25px;
  position: relative;
  top: -1px;
  margin-right: 5px;
}
.Emp_approval .wait_list .wait_title .wait_sub.xiaojia {
  background-color: #1cbe29fb;
}
.Emp_approval .wait_list .wait_title .wait_time {
  float: right;
  color: #999;
}
.Emp_approval .wait_list .wait_info {
  padding: 5px 10px;
  color: #999;
}
.Emp_approval .wait_list .fa-clock-o.fa-user-o.fa-arrow-circle-o-right {
  color: #ccc;
  margin-right: 5px;
}
.Emp_approval .wait_list .info_tip {
  color: #38f;
}
.Emp_approval .commit_list .commit_items {
  padding: 10px 20px;
  border-bottom: 1px solid #ecf0f5;
  cursor: pointer;
}
.Emp_approval .commit_list .commit_sub {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #38f;
  border-radius: 8px;
}
.Emp_approval .commit_list b {
  margin: 0 10px;
}
.Emp_approval .commit_list .commit_time {
  float: right;
  color: #999;
}
.Emp_approval .commit_list .commit_reason {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.Emp_approval .time_connect {
  margin: 0 5px;
}
</style>
